<!--搜索组件-->
<script setup>
const props = defineProps({
  modelValue: {
    type: String,
    default: null
  }
})
const emits = defineEmits(['update:model-value', 'search'])
const keyword = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emits('update:model-value', val)
  }
})
const handleSearch = () => {
  emits('search', keyword)
}
</script>

<template>
  <div
    class="flex justify-between items-center bg-white px-12px shadow-[0_1px_6px_0_#44474f0d]"
  >
    <van-search
      class="flex-1"
      v-model="keyword"
      :clearable="true"
      size="normal"
      placeholder="请输入工单号、关键字查询"
      @clear="handleSearch"
      @search="handleSearch"
    />
    <van-button
      round
      style="border-radius: 5px"
      class="w-61px h-32px rounded-4px"
      @click="handleSearch"
      type="primary"
      >查询</van-button
    >
  </div>
</template>

<style scoped lang="less">
.van-search {
  padding: 12px 8px 12px 0;
}
.van-button--primary {
  color: #fff;
  background-color: #36b374;
  border: 1px solid #36b374;
  height: 32px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}
</style>
